<template>
    <div>
        <vue-tinymce
            :setting="setting"
            v-model="content" 
        />
    </div>
</template>

<script>
export default {
    name: 'Edit',
    props: {
        value: {
            type: String,
            default: '',
        },
    },
    data() {
        return {
            setting: {
                language: 'zh_CN',
                height: '300px',
                branding: false,
                plugins: 'preview wordcount code image media codesample lists table',
                toolbar: [ //数组写法
                    'undo redo styleselect fontsizeselect bold italic underline strikethrough alignleft aligncenter alignright alignjustify blockquote removeformat numlist bullist table link image preview',
                ]
            },
            content: this.value,
        }
    },
    watch: {
        value(newV) {
            this.content = newV
        },
        content(newV) {
            this.$emit('input', newV)
        },
    },
}
</script>

<style scoped>
@import url('tinymce/skins/ui/oxide/skin.min.css');
@import url('tinymce/skins/content/default/content.min.css');
</style>
